<template>
  <div>
    <!-- 计算属性
          使用场景：依赖一个或者多个值产生一个新的值
          特点：它有缓存特性（依赖的值不改变时，它的方法不会再次执行）
          computed:{
             名字(){
              return 新的值
             }
          }
          computed:{
            名字:{
              get(){
                return 新的值
              },
              set(value){
               ......
              }
            }
          }
          v-model="计算属性的值"
          默认不可行，但是可以给计算属性加入set就可以了

     -->
    <h1>人民币：<input type="text" v-model.number="money" /></h1>
    <h1>美元：{{ dollar }}</h1>
    <h1>美元：{{ dollar }}</h1>
    <h1>美元：{{ dollar }}</h1>
    <hr />
    <!-- <h1>美元：{{ getDollar() }}</h1>
    <h1>美元：{{ getDollar() }}</h1>
    <h1>美元：{{ getDollar() }}</h1> -->
    <hr />
    <input type="text" v-model="dollar" />
  </div>
</template>
<script>
export default {
  data () {
    return {
      money: 100
    }
  },
  computed: {
    // dollar () {
    //   console.log('计算属性')
    //   return this.money * 6.98
    // }
    dollar: {
      get () {
        return this.money * 6.98
      },
      set (value) {
        this.money = +(value / 6.98).toFixed(2)
      }
    }
  },
  methods: {
    getDollar () {
      console.log('methods')
      return this.money * 6.98
    }
  }
}
</script>
<style></style>
